<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <title>问题反馈</title>
    <link rel="stylesheet" href="../css/mui.min.css">
    <script src="../js/mui.min.js"></script>
    <!--App自定义的css-->
    <link rel="stylesheet" type="text/css" href="../css/app.css" />
    <link rel="stylesheet" href="../npl/css/vant.mini.css" />
    <script src="../js/vconsole.min.js"></script>
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../js/flexible.js"></script>
    <script src="../wx/uap.js"></script>
    <script src="./text.js" type="text/javascript"></script>
    <script src="../npl/js/vant.mini.js"></script>
    <script src="../js/sm3.js"></script>
    <script src="../js/sm2.js"></script>
</head>
<style>
    body {
        margin: 0;
        padding: 0;
    }

    .form-box {
        padding: 10px 15px;
    }

    .van-cell--required::before {
        left: .26rem;
    }

    .form-box .van-cell {
        border-radius: 7px;
        align-items: center;
        padding: 0 .4rem;
    }

    .form-box .van-cell.van-field--min-height {
        padding: 10px 16px;
    }

    .form-box .van-field--disabled .van-field__label {
        color: #646566;
    }

    .form-box input[type=text] {
        border: none;
        margin-bottom: 0;
        padding: 0;
    }

    .foot {
        display: flex;
        justify-content: center;
        width: 100%;
        position: absolute;
        bottom: .21rem;
        left: 0;
        width: 100%;
    }

    .foot_wrapper {
        font-family: PingFang SC;
        color: #2d343c;
        font-size: 12px;
        opacity: 60%;
        width: 100%;
        text-align: center;
        padding: 0 10px;
    }

    .van-nav-bar {
        background: none !important;
        ;
    }

    .header_upload1 {
        /* padding: 0 24px; */
        /* height: 2.8rem; */
        position: relative;
    }

    .upload_wrapper1 {
        width: 100%;
        /* max-height: calc(2.7rem - 27px); */
        margin: auto;
        /* padding-left: 8px; */
        overflow-y: scroll;
        /* padding: 5px 0px 0; */
        /* margin: 10px 0 0 10px; */
    }

    .text_title {
        /* height: 30px; */
        /* padding: 0% 0% 0% 4%; */
        position: relative;
        /* border-bottom: 1px solid #8a9dbe; */
        /* background:turquoise; */
        /* line-height: 30px;         */
    }

    .first_span {
        width: 3px;
        border-radius: 20% 20%;
        display: inline-block;
        height: 15px;
        background: #4294f1;
    }

    .first_span_text {
        font-weight: 500;
        font-size: 15px;
        color: #1e3754;
        /* position: absolute; */
        /* left: 7%; */
        /* top: 11%; */
    }

    .first_span_img {
        /* position: absolute;
        left: 25%;
        top: 36%; */
        margin-left: 3px;
        color: red;
    }

    .numImg {
        display: flex;
        margin-bottom: 10px;
        color: block;
        font-size: 14px;
        /* margin-left: 10px; */
    }

    .van-uploader__upload-icon img {
        width: 100%;
        height: 100%;
    }

    .van-uploader__upload {
        width: 38vw;
        height: calc(50vw * 3 / 4);
        border: #50a7f4 1px dashed;
        border-radius: 8px;
        /* border: 1px dashed #bcbebe; */
        margin: 0 8px 0px 4px;
        background: url("../image/bg-3.png") no-repeat;
        background-size: 100% 100%;
        /* background: none !important; */
    }

    .upload_img {
        /* width: 44%; */
        width: 25vw;
        height: calc(34vw * 3 / 4);
        /* width: 120px; */
        /* border: #50a7f4 0.25px dashed; */
        /* height: 120px; */
        /* padding: 20px; */
        /* background: #ffffff; */
        /* border-radius: 8px; */
        /* border: 1px dashed #bcbebe; */
        display: flex;
        flex-direction: column;
        /* justify-content: space-around; */
        align-items: center;
        padding: 2px;
        position: relative;
        margin-top: 8px;
        /* margin-bottom: 10px; */
        float: left;
        box-sizing: border-box;
        background: url("../image/bg-3.png") no-repeat;
        background-size: 100% 100%;
    }

    .upload_img:nth-child(3n+2) {
        margin-right: 5%;
        margin-left: 5%;
    }

    .img_active {
        width: 28%;
        height: 80px;
        /* padding: 20px; */
        background: #ffffff;
        border-radius: 8px;
        opacity: 0;
    }

    .quxiao {
        position: absolute;
        right: -8%;
        top: -5%;
        display: block;
        width: 20%;
        height: 20%;
    }

    .chenggong {
        position: absolute;
        left: 38%;
        bottom: -6%;
        display: block;
        width: 28%;
        height: 20%;
    }

    .upimg {
        margin-top: 10px;
        width: 36px;
        height: 30px;
        background: url("../image/bg-1.png") no-repeat;
        background-size: 100% 100%;
    }

    .up_text {
        font-weight: 500;
        font-size: 12px;
        color: #969799;
    }

    .inp {
        display: inline-block;
    }

    input[type="text"] {
        width: 230px;
        height: 50px;
        margin-bottom: 0;
    }
    .title_right{
        font-size: 12px;
        margin-right: 10px;
    }
</style>
</head>

<body>
    <div class="box" id="app">
        <div class="is-loading">
            <div class="curtain">
              <div class="loadingBgc">
                <div class="loader"></div>
              </div>
            </div>
          </div>
        <div class="header_tit">
            <van-nav-bar title="问题反馈" left-arrow>
                <template #left>
                    <div class="back_l" @click="home"><img src="../image/left.png" alt=""></div>
                </template>
            </van-nav-bar>
        </div>
        <div class="form-box">
            <!-- clearable -->
            <span class="numImg">问题描述</span>
            <van-field v-model="text" readonly type="textarea" rows="8" maxlength="200" show-word-limit
                placeholder="hi~请详细描述你的使用场景，帮助我们更好的定位问题进行产品优化..." />
        </div>
        <div class="form-box" style="padding: 0px 15px;">
            <div class="header_upload1">
                <div class="text_title">
                    <span class="numImg">问题截图</span>
                    </span>
                </div>
                <div class="upload_wrapper1">
                    <div class="upload_img" v-for="(item, index) in addedPreviewFile">
                        <img :src="item.imgUrl" style="width: 100%; height: 100%" alt="" ref="img"
                            v-if="addedPreviewFile" />
                    </div>
                    <div class="upload_img" v-if="addedPreviewFile.length == 0">
                        <input disabled type="file" id="inputer" class="file-input4 file-input"
                            style="display: none; width: 28%; height: 100%" ref="inputer" />
                    </div>
                </div>
            </div>
        </div>
        <div class="form-box">
            <!-- required -->
            <van-field v-model="phone" label="手机号" placeholder="请输入手机号" disabled :label-width="80" />
        </div>
        <div class="form-box" style="padding-top:5px">
            <van-field v-model="email" label="邮箱" disabled required placeholder="请输入邮箱" clearable :label-width="80" />
        </div>
       
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                    text: '',
                    phone: '',
                    email: '',
                    newEmail: '',
                isflageIOX: false,
                addedPreviewFile: [], // 最终存储
            }
        },
        computed: {
            // && this.phone !== null && this.phone !== ''
            isFormNotEmpty() {
                return this.text !== null && this.text !== '' && this.email !== null && this.form
                    .email !== '';
            },
            buttonStyle() {
                if (this.isFormNotEmpty) {
                    return {
                        background: '#19AEB0',
                        borderColor: '#19AEB0'
                    }; // 当属性不为空时的样式  
                } else {
                    return {};
                }
            },
            footStyle() {
                if (this.isFormNotEmpty) {
                    return {
                        opacity: '100%'
                    };
                } else {
                    return {};
                }
            },
            disabled() {
                if (this.isFormNotEmpty) {
                    return false;
                } else {
                    return true;
                }
            }
        },
        created() {
            const _this = this;
            _this.compatibleInput();
            $.getScript("../js/jweixin-sgccigw-1.0.0.js" /*"js/jweixin-1.0.0.js"*/ , function () {
                let jsApiList = [];
                wx.ready(function () {
                    wx.onHistoryBack(() => {
                        _this.home()
                        return false
                    })
                });
                jsApiList = [
                    'onHistoryBack',
                    "chooseImage",
                    "getLocalImgData",
                    "previewImage",
                    "uploadImage",
                    "downloadImage",
                    "previewFile",
                    "startRecord",
                    "stopRecord",
                ];
                wx.config({
                    beta: true,
                    debug: false,
                    appId: "ww4d11a39991ebffdc",
                    timestamp: '1639582452',
                    nonceStr: "AMQGnmTMzhJetshY",
                    signature: 'fb9f560a9b4824f7db3525926994010de74ea055',
                    jsApiList: jsApiList
                });
            });
        },
        mounted() {
           this.checkFun(sessionStorage.getItem("historyDes")) 
            
        },
        methods: {
            // 判断安卓还是ios
            compatibleInput() {
                //获取浏览器的userAgent,并转化为小写
                var ua = navigator.userAgent.toLowerCase();
                //判断是否是苹果手机，是则是true
                var isIos = ua.indexOf("iphone") != -1 || ua.indexOf("ipad") != -1;
                if (isIos) {
                    this.isflageIOX = true;
                } else {
                    this.isflageIOX = false;
                }
            },
            
        checkFun(id) {
          let AuthenticationSession =
            sessionStorage.getItem("Authentication");
            iscp_port = sessionStorage.getItem("iscp_port") ? sessionStorage.getItem("iscp_port") : '' 
          let data = {
            id: id,
            timestamp: new Date().getTime() + "", //时间戳
          };
          data = JSON.stringify(data);
          let sign = sm3(data);
          $.ajax({
            url: localUrlLink + iscp_port + "/tjAiAssistant/defect/selectDefectRecordById",
            type: "post",
            async: false, //是否同步，false表示同步请求
            dataType: "json",
            data: data,
            headers: {
              "Content-Type": "application/json;charset=UTF-8",
              Authentication: AuthenticationSession,
              sign: sign,
            },
            success: (res, txt, xhr) => {
              if (sm3(res.resultValueStr) == xhr.getResponseHeader("sign")) {
                let Authentication = xhr.getResponseHeader("Authentication");
                if (res.code == 200) {
                  if (Authentication) {
                    sessionStorage.setItem("Authentication", Authentication);
                    //    成功
                    this.text = res.resultValue.text
                    this.email = res.resultValue.email
                    this.phone = res.resultValue.phone
                    
                    res.resultValue.attachmentIds2.forEach(element => {
                          var time = new Date().getTime() + ""
                           this.addedPreviewFile.push({
                            imgUrl: localUrlLink + iscp_port +`/tjAiAssistant/shareFile/downloadToWord?Authentication=${sessionStorage.getItem("Authentication")}&id=${element}&sign=${sm3(time + "&" + element)}&timestamp=${time}`
                           })
                    });
                   
                  }
                } else {
                  mui.toast(res.resultValue, {
                    duration: "long",
                    type: "div",
                  });
                }
              }
            },
            error: function (e) {
              $(".curtain").css("display", "none");
              mui.toast("请求异常请稍后再试", {
                duration: "long",
                type: "div",
              });
            },
          });
        }, createNonceStr(len) {
          var e = len ? len : 16;
          var t =
            "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789",
            a = t.length,
            n = "";
          for (i = 0; i < e; i++)
            n += t.charAt(Math.floor(Math.random() * a));
          return n;
        },
           home() {
                $(location).attr("href", "feedbackHistory.html");
            },
           
             }
    })
</script>

</html>